<template>
  <div>
    <div class="detail">
      <div>
        <el-steps :active="active" align-center>
          <el-step title="工程概况" />
          <el-step title="施工信息" />
          <el-step title="工程管理" />
          <el-step title="其他" />
        </el-steps>
      </div>
      <div class="form_box">
        <!-- 工程概况表单 -->
        <div v-show="active === 0">
          <el-row>
            <el-col :span="20" :offset="2">
              <el-form ref="firstForm" :rules="firstRules" size="small" :model="temp" label-position="top">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="工程名称：" prop="name">
                      <div>{{ temp.name }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="工程编号：" prop="number">
                      <div>{{ temp.number }}</div>
                      <!-- <el-input
                        v-model="temp.number"
                        placeholder="请填写工程编号"
                      /> -->
                    </el-form-item>
                  </el-col>
                  <!-- <el-col :span="12">
                    <el-form-item label="勘察单号" prop="surveyNumber">
                      <div>{{ temp.surveyNumber }}</div>
                    </el-form-item>
                  </el-col> -->
                </el-row>

                <el-row>
                  <el-col :span="12">
                    <el-form-item label="建设单位：" prop="ownerUnit">
                      <div>{{ temp.ownerUnit }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="施工单位：" prop="constructionUnit">
                      <div>{{ temp.constructionUnit }}</div>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="12">
                    <el-form-item label="工程地点：" prop="location">
                      <div>{{ temp.location }}</div>
                    </el-form-item>
                  </el-col>
                  <!-- <el-col :span="12">
                    <el-form-item label="安全负责人：" prop="safetyManager">
                      <div>{{ temp.safetyManager }}</div>
                    </el-form-item>
                  </el-col> -->
                </el-row>
                <!-- <el-row :gutter="20"> -->

                <!-- <el-col :span="12">
                    <el-form-item label="检查时间" prop="checkDate">
                      <el-date-picker
                        style="width:100%"
                        v-model="temp.checkDate"
                        size="small"
                        type="daterange"
                        format="yyyy-MM-dd"
                        value-format="timestamp"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                      </el-date-picker>
                    </el-form-item>
                  </el-col> -->
                <!-- </el-row> -->
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="工程内容及主要工作量：" prop="workload">
                      <el-input
                        v-model="temp.workload"
                        type="textarea"
                        :rows="3"
                        placeholder="请填写工程内容及主要工作量："
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="作业方式" prop="jobWay">
                      <el-select v-model="temp.jobWay" style="width:100%" clearable placeholder="请选择">
                        <dict-option :dict-name="'schemeJobWay'" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="作业环境" prop="workEnv">
                      <el-input
                        v-model="temp.workEnv"
                        type="textarea"
                        :rows="3"
                        placeholder="请填写作业环境"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" style="text-align: center;">
              <el-button type="primary" @click="submitFirst()">下一步</el-button>
            </el-col>
          </el-row>
        </div>
        <!-- 施工信息 -->
        <div v-show="active === 1">
          <el-row style="margin-top: 40px;">
            <el-col :span="20" :offset="2">
              <el-form ref="secondForm" :rules="secondRules" :model="temp" label-position="top">
                <el-row :gutter="20">
                  <!-- projectLeader: null,
                  constructionLeader: null,
                  technicalLeader: null,
                  qualityLeader: null,
                  materialLeader: null,
                  workUsers: [], -->
                  <el-col :span="12">
                    <el-form-item label="工程负责人" prop="projectLeader">
                      <!-- <el-select style="width:80%" filterable clearable v-model="temp.projectLeader" placeholder="请选择">
                        <el-option v-for="item in allUsers" :label="item.label" :value="item.value" :key="item.value"></el-option>
                      </el-select> -->
                      <el-input
                        v-model="temp.projectLeader"
                        style="width:80%"
                        placeholder="请填写工程负责人"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="施工负责人" prop="constructionLeader">
                      <el-select
                        v-model="temp.constructionLeader"
                        style="width:80%"
                        filterable
                        clearable
                        placeholder="请选择"
                      >
                        <el-option v-for="item in allUsers" :key="item.value" :label="item.label" :value="item.value" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="技术负责人" prop="technicalLeader">
                      <el-select
                        v-model="temp.technicalLeader"
                        style="width:80%"
                        filterable
                        clearable
                        placeholder="请选择"
                      >
                        <el-option v-for="item in allUsers" :key="item.value" :label="item.label" :value="item.value" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="安全员" prop="qualityLeader">
                      <el-select v-model="temp.qualityLeader" style="width:80%" filterable clearable placeholder="请选择">
                        <el-option v-for="item in allUsers" :key="item.value" :label="item.label" :value="item.value" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="材料员" prop="materialLeader">
                      <el-select v-model="temp.materialLeader" style="width:80%" filterable clearable placeholder="请选择">
                        <el-option v-for="item in allUsers" :key="item.value" :label="item.label" :value="item.value" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="工作班人员" prop="workUsers">
                      <el-select v-model="temp.workUsers" style="width:100%" multiple placeholder="请选择">
                        <el-option v-for="item in allUsers" :key="item.value" :label="item.label" :value="item.value" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="其他工作班人员" prop="otherUsers">
                      <el-input
                        v-model="temp.otherUsers"
                        type="textarea"
                        :rows="2"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="工作任务" prop="workTasks">
                      <el-input
                        v-model="temp.workTasks"
                        type="textarea"
                        :rows="3"
                        placeholder="请填写工作任务"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="人员分工" prop="workDivision">
                      <el-input
                        v-model="temp.workDivision"
                        type="textarea"
                        :rows="3"
                        placeholder="请填写人员分工"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="安全工器具情况" prop="instrument">
                      <el-input
                        v-model="temp.instrument"
                        type="textarea"
                        :rows="3"
                        placeholder="请填写安全工器具情况"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="工器具配备表">
                      <div v-for="(item, index) in temp.equipments" style="margin-bottom: 10px;">
                        <div>
                          <span v-if="item.code==='native'">{{ item.name }}</span>
                          <el-input
                            v-else
                            v-model="item.name"
                            size="small"
                            style="width: 120px;"
                          />
                        </div>
                        <div>
                          <el-row :gutter="20">
                            <el-col :span="6">
                              <div class="input-suffix">
                                <div class="s-title">数量</div>
                                <div class="s-cont">
                                  <el-input
                                    v-model="item.number"
                                    size="small"
                                  />
                                </div>
                              </div>
                            </el-col>
                            <el-col :span="6">
                              <div class="input-suffix">
                                <div class="s-title">规格</div>
                                <div class="s-cont">
                                  <el-input
                                    v-model="item.specification"
                                    size="small"
                                  />
                                </div>
                              </div>
                            </el-col>
                            <el-col :span="6">
                              <div class="input-suffix">
                                <div class="s-title">备注</div>
                                <div class="s-cont">
                                  <el-input
                                    v-model="item.remark"
                                    size="small"
                                  />
                                </div>
                              </div>
                            </el-col>
                            <el-col :span="6" style="text-align: right;">
                              <el-button size="small" @click="deleteEqu(index)">删除</el-button>
                            </el-col>
                          </el-row>
                        </div>
                      </div>
                      <div>
                        <el-button type="primary" size="small" @click="addEqu()">新增</el-button>
                      </div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="施工进度节点计划" prop="schedulingNodes" />
                  </el-col>
                  <el-col :span="16">
                    <el-button size="small" @click="showTemplate=true">选择施工进度模板</el-button>
                  </el-col>
                  <el-col :span="24">
                    <div v-for="(item, index) in temp.schedulingNodes" style="margin-bottom: 10px;">
                      <el-row :gutter="8">
                        <el-col :span="5">
                          <el-form-item label="工作内容：">
                            <el-input
                              v-model="item.content"
                              size="small"
                            />
                          </el-form-item>
                        </el-col>
                        <el-col :span="7">
                          <el-form-item label="开始/完成时间：">
                            <el-date-picker
                              v-model="item.checkDate"
                              style="width:100%"
                              type="datetimerange"
                              size="small"
                              value-format="yyyy-MM-dd HH:mm:ss"
                              range-separator="至"
                              start-placeholder="开始时间"
                              end-placeholder="结束时间"
                            />
                          </el-form-item>
                        </el-col>
                        <el-col :span="5">
                          <el-form-item label="安全措施：">
                            <el-input
                              v-model="item.safetyControl"
                              size="small"
                              type="textarea"
                              :rows="3"
                            />
                          </el-form-item>
                        </el-col>
                        <el-col :span="5">
                          <el-form-item label="配合部门：">
                            <el-input
                              v-model="item.division"
                              size="small"
                            />
                          </el-form-item>
                        </el-col>
                        <el-col :span="2" style="text-align: right;">
                          <el-button size="small" @click="deleteTmplate(index)">删除</el-button>
                        </el-col>
                      </el-row>
                    </div>
                    <div>
                      <el-button type="primary" size="small" @click="addTemplate('add')">新增</el-button>
                    </div>
                  </el-col>
                </el-row>
              </el-form>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" style="text-align: center;">
              <el-button @click="active = 0">上一步</el-button>
              <el-button type="primary" @click="submitSecond()">下一步</el-button>
            </el-col>
          </el-row>
        </div>
        <div v-show="active === 2">
          <el-row style="margin-top: 40px;">
            <el-col :span="14" :offset="5">
              <el-form ref="thirdForm" :rules="thirdRules" :model="temp" label-position="top">
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="施工管理" prop="workManage">
                      <el-input
                        v-model="temp.workManage"
                        type="textarea"
                        :rows="3"
                        placeholder="请填写施工管理"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="技术管理" prop="technicalManage">
                      <el-input
                        v-model="temp.technicalManage"
                        type="textarea"
                        :rows="3"
                        placeholder="请填写技术管理"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="质量管理" prop="qualityControl">
                      <el-input
                        v-model="temp.qualityControl"
                        type="textarea"
                        :rows="3"
                        placeholder="请填写质量管理"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="安全管理措施" prop="safetyControl">
                      <el-input
                        v-model="temp.safetyControl"
                        type="textarea"
                        :rows="3"
                        placeholder="请填写安全管理措施"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="危险点控制" prop="dangerPoints">
                      <div v-for="(item, index) in temp.dangerPoints">
                        <div class="danger">
                          <div style="font-weight: 700;">{{ '危险点' + (index + 1) + ': ' + item.point }}</div>
                          <div>
                            <el-button type="text" size="small" @click="editDanger(item)">编辑</el-button>
                            <el-button type="text" size="small" @click="deleteDanger(index)">删除</el-button>
                          </div>
                        </div>
                        <div class="danger-content">{{ item.measure }}</div>
                      </div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-button type="primary" size="small" @click="showDanger=true">添加危险点</el-button>
                  </el-col>
                </el-row>
              </el-form>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" style="text-align: center;">
              <el-button @click="active = 1">上一步</el-button>
              <el-button type="primary" @click="submitThird()">下一步</el-button>
            </el-col>
          </el-row>
        </div>
        <div v-show="active === 3">
          <el-row style="margin-top: 40px;">
            <el-col :span="14" :offset="5">
              <el-form label-position="top">
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="施工图纸" prop="drawings">
                      <el-upload
                        class="upload-demo"
                        action=""
                        :on-remove="(file, fileList) => {handleRemove(file, fileList, null)}"
                        :before-upload="beforeAvatarUpload"
                        :http-request="handleUpload"
                        :on-success="handleSuccess"
                        :limit="5"
                        :on-exceed="handleExceed"
                        :file-list="temp.drawings"
                      >
                        <el-button size="small" type="primary" @click="exportType=null">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传文件或者图片，且不超过20mb</div>
                      </el-upload>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="16">
                    <el-form-item label="主要施工机械工器具安全防护用品（用具）报审表">
                      <el-upload
                        class="upload-demo"
                        action=""
                        :on-remove="(file, fileList) => {handleRemove(file, fileList, 1)}"
                        :before-upload="beforeAvatarUpload"
                        :http-request="handleUpload"
                        :on-success="handleSuccess"
                        :limit="1"
                        :on-exceed="handleExceed"
                        :file-list="temp.protectiveEquipmentDoc"
                      >
                        <el-button size="small" type="primary" @click="exportType=1">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传docx或pdf文件</div>
                      </el-upload>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-button type="text" @click="downloadFile(0)">下载模板</el-button>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="16">
                    <el-form-item label="大中型施工机械进场出场申报表">
                      <el-upload
                        class="upload-demo"
                        action=""
                        :on-remove="(file, fileList) => {handleRemove(file, fileList, 2)}"
                        :before-upload="beforeAvatarUpload"
                        :http-request="handleUpload"
                        :on-success="handleSuccess"
                        :limit="1"
                        :on-exceed="handleExceed"
                        :file-list="temp.mechanicalIoDoc"
                      >
                        <el-button size="small" type="primary" @click="exportType=2">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传docx或pdf文件</div>
                      </el-upload>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-button type="text" @click="downloadFile(1)">下载模板</el-button>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="16">
                    <el-form-item label="安全工器具登记台账">
                      <el-upload
                        class="upload-demo"
                        action=""
                        :on-remove="(file, fileList) => {handleRemove(file, fileList, 3)}"
                        :before-upload="beforeAvatarUpload"
                        :http-request="handleUpload"
                        :on-success="handleSuccess"
                        :limit="1"
                        :on-exceed="handleExceed"
                        :file-list="temp.safetyToolDoc"
                      >
                        <el-button size="small" type="primary" @click="exportType=3">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传docx或pdf文件</div>
                      </el-upload>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-button type="text" @click="downloadFile(2)">下载模板</el-button>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="安全措施项">
                      <el-row v-for="safeInfo in safeInfoList">
                        <el-col :span="22">
                          <span>{{ safeInfo.nam }}</span>
                          <div v-for="(item) in safeInfo.safePics">
                            <div style="margin-bottom: 10px;" v-if="item.indexOf('.png') > -1 || item.indexOf('.jpg') > -1">
                              <img class="img" :src="item" @click="openImg(item)" />
                            </div>
                          </div>
                        </el-col>
                      </el-row>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="温馨提示">
                      <span>请下载申报表后，签字、盖章后前往 APP 拍照上传系统</span>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" style="text-align: center;">
              <el-button @click="active = 2">上一步</el-button>
              <el-button type="primary" @click="submit()">发起审批</el-button>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <!-- 选择施工进度模板 -->
    <el-dialog title="选择施工进度模板" :visible.sync="showTemplate" :close-on-click-modal="false" width="600px" append-to-body>
      <el-form
        ref="templateForm"
        :rules="templateRules"
        :model="template"
        label-position="top"
        style="margin-left: 20px;"
      >
        <el-row>
          <el-col :span="18">
            <el-form-item label="选择进度节点" prop="value">
              <el-select v-model="template.value" style="width:100%" filterable clearable placeholder="请选择">
                <el-option
                  v-for="item in templateOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="footer">
        <el-button size="small" @click="showTemplate=false">取消</el-button>
        <el-button size="small" type="primary" @click="addTemplate()">添加进度节点</el-button>
      </div>
    </el-dialog>
    <!-- 选择危险点控制 -->
    <el-dialog title="选择危险点控制" :visible.sync="showDanger" :close-on-click-modal="false" width="600px" append-to-body>
      <el-form ref="dangerForm" :rules="dangerRules" :model="danger" label-position="top" style="margin-left: 20px;">
        <el-row>
          <el-col :span="18">
            <el-form-item label="选择危险点" prop="value">
              <el-select v-model="danger.value" style="width:100%" filterable clearable placeholder="请选择">
                <el-option
                  v-for="item in dangerOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="footer">
        <el-button size="small" @click="showDanger=false">取消</el-button>
        <el-button size="small" type="primary" @click="addDanger()">添加危险点</el-button>
      </div>
    </el-dialog>
    <!-- 编辑危险点控制 -->
    <el-dialog
      title="编辑危险点控制"
      :visible.sync="showEditDangerLog"
      :close-on-click-modal="false"
      width="600px"
      append-to-body
    >
      <el-form label-position="top" style="margin-left: 20px;">
        <el-row>
          <el-col :span="18">{{ editDangerDetail.point }}</el-col>
          <el-col :span="18">
            <el-input
              v-model="editDangerDetail.measure"
              type="textarea"
              :rows="6"
            />
          </el-col>
        </el-row>
      </el-form>
      <div class="footer">
        <el-button size="small" type="primary" @click="showEditDangerLog = false">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { schemeSave, getTemplate, getDangerPoints } from '@/api/scheme/index'
import { getSurveyDetail } from '@/api/survey/index'
import { mapGetters } from 'vuex'
import DictOption from '@/components/selectOption/dict'
import { userPage } from '@/api/usrs/index'

const files = [
  'https://newjieyin.oss-cn-beijing.aliyuncs.com/violation/ticket/1698324940140XM6a6.docx', // 大中型施工机械进场出场申报表
  'https://newjieyin.oss-cn-beijing.aliyuncs.com/violation/ticket/1698324993181hdscq.docx', // 主要施工机械工器具安全防护用品
  'https://newjieyin.oss-cn-beijing.aliyuncs.com/violation/ticket/1698324882164W7pWo.docx' // 安全工器具登记台账
]
export default {
  name: 'EditScheme',
  components: {
    DictOption
  },
  props: {
    ticketDetail: {
      type: Object
    }
  },
  computed: {
    ...mapGetters([
      'uid',
      'name'
    ])
  },
  data() {
    return {
      showImgFlag: false,
      imgList: [],
      editDangerDetail: {
        number: null,
        point: '',
        measure: ''
      },
      showEditDangerLog: false,
      elLoading: false,
      active: 0,
      title: '',
      exportType: null,
      allUsers: [],
      showTemplate: false,
      template: {
        value: null
      },
      templateOptions: [],
      templateList: [],
      showDanger: false,
      danger: {
        value: null
      },
      surveyDate: {},
      safeInfoList: [],
      dangerOptions: [],
      dangerList: [],
      temp: {
        id: null,
        name: '',
        number: '',
        checkDate: [],
        ownerUnit: '',
        safetyNamagerId: null,
        constructionUnit: '',
        location: '',
        workload: '',
        surveyId: null,
        jobWay: null,
        workEnv: null,
        drawings: [],
        projectLeader: '',
        constructionLeader: null,
        technicalLeader: null,
        qualityLeader: null,
        materialLeader: null,
        workUsers: [],
        otherUsers: '',
        workDivision: '',
        workTasks: '',
        instrument: '',
        equipments: [],
        schedulingNodes: [],
        workManage: '',
        technicalManage: '',
        qualityControl: '',
        safetyControl: '',
        dangerPoints: [],
        protectiveEquipmentDoc: [],
        mechanicalIoDoc: [],
        safetyToolDoc: [],
        auditStatus: 0 // 状态
      },
      templateRules: {
        value: [
          { required: true, message: '请选择进度节点', trigger: 'blur' }
        ]
      },
      dangerRules: {
        value: [
          { required: true, message: '请选择危险点', trigger: 'blur' }
        ]
      },
      firstRules: {
        // number: [
        //   { required: true, message: '工程编号不能为空', trigger: 'blur'},
        //   { min:1, max: 50, message: '限制长度50字以内', trigger: 'blur' }
        // ],
        // checkDate: [
        //   { type: 'array', required: true, message: '请选择检查时间' }
        // ],
        workload: [
          { required: true, message: '请填写工作内容及主要工作量', trigger: 'blur' },
          { min: 1, max: 500, message: '限制长度500字以内', trigger: 'blur' }
        ],
        jobWay: [
          { required: true, message: '请选择作业方式', trigger: 'blur' }
        ],
        workEnv: [
          { required: true, message: '请填写作业环境', trigger: 'blur' },
          { min: 1, max: 500, message: '限制长度500字以内', trigger: 'blur' }
        ]
      },
      secondRules: {
        projectLeader: [
          { required: true, message: '请填写工程负责人', trigger: 'blur' }
        ],
        constructionLeader: [
          { required: true, message: '请选择施工负责人', trigger: 'blur' }
        ],
        technicalLeader: [
          { required: true, message: '请选择技术负责人', trigger: 'blur' }
        ],
        qualityLeader: [
          { required: true, message: '请选择安全员', trigger: 'blur' }
        ],
        materialLeader: [
          { required: true, message: '请选择材料员', trigger: 'blur' }
        ],
        workUsers: [
          { required: true, message: '请选择工作班人员', trigger: 'blur' }
        ],
        workDivision: [
          { required: true, message: '组织分工不能为空', trigger: 'blur' },
          { min: 1, max: 500, message: '限制长度500字以内', trigger: 'blur' }
        ],
        workTasks: [
          { required: true, message: '工作任务不能为空', trigger: 'blur' },
          { min: 1, max: 500, message: '限制长度500字以内', trigger: 'blur' }
        ],
        instrument: [
          { required: true, message: '安全工器具情况不能为空', trigger: 'blur' },
          { min: 1, max: 500, message: '限制长度500字以内', trigger: 'blur' }
        ],
        schedulingNodes: [
          { required: true, message: '施工进度节点计划不能为空', trigger: 'blur' }
        ]
      },
      thirdRules: {
        workManage: [
          { required: true, message: '施工管理不能为空', trigger: 'blur' },
          { min: 1, max: 500, message: '限制长度500字以内', trigger: 'blur' }
        ],
        technicalManage: [
          { required: true, message: '技术管理不能为空', trigger: 'blur' },
          { min: 1, max: 500, message: '限制长度500字以内', trigger: 'blur' }
        ],
        qualityControl: [
          { required: true, message: '质量管理不能为空', trigger: 'blur' },
          { min: 1, max: 500, message: '限制长度500字以内', trigger: 'blur' }
        ],
        safetyControl: [
          { required: true, message: '安全管理措施不能为空', trigger: 'blur' },
          { min: 1, max: 500, message: '限制长度500字以内', trigger: 'blur' }
        ],
        dangerPoints: [
          { required: true, message: '危险点控制不能为空', trigger: 'blur' }
        ]
      }
      // drawings: [
      //     { type: 'array', required: true, message: '请上传图片/文件' }
      //   ],
    }
  },
  created() {

  },
  async mounted() {
    await this.getAllUser()
    await this.getTemeplateList()
    await this.getDangerList()
    this.title = this.ticketDetail ? '编辑施工方案' : '新建施工方案'
    if (this.ticketDetail) this.temp = this.ticketDetail
    if (this.temp.surveyId) this.getSurveyDetails()
  },
  methods: {
    // 获取危险点
    async getDangerList() {
      getDangerPoints().then(res => {
        // if(res.data && res.data.length > 0) {
        this.dangerList = res.data
        res.data.forEach(item => {
          this.dangerOptions.push({
            value: item.number,
            label: item.point
          })
        })
        // }
      })
    },
    // 获取勘察记录项
    async getSurveyDetails() {
      getSurveyDetail({ id: this.temp.surveyId })
        .then(res => {
          this.surveyDate = res.data
          if (res.data) {
            this.safeInfoList = res.data.safeInfoList
          }
        })
    },
    deleteDanger(index) {
      this.temp.dangerPoints.splice(index, 1)
    },
    addDanger() {
      this.$refs['dangerForm'].validate(async(valid) => {
        if (valid) {
          const d = this.dangerList.find(item => item.number === this.danger.value)
          this.temp.dangerPoints.push(d)
          this.showDanger = false
        }
      })
    },
    editDanger(item) {
      this.editDangerDetail = item
      this.showEditDangerLog = true
    },
    // 获取施工进度节点计划
    async getTemeplateList() {
      getTemplate().then(res => {
        // if(res.data && res.data.length > 0) {
        this.templateList = res.data
        res.data.forEach((item, index) => {
          this.templateOptions.push({
            value: index,
            label: item.name
          })
        })
        // }
      })
    },
    deleteTmplate(index) {
      this.temp.schedulingNodes.splice(index, 1)
    },
    addTemplate(type) {
      if (type === 'add') {
        this.temp.schedulingNodes.push({
          serialNumber: '',
          content: '',
          safetyControl: '',
          division: '',
          checkDate: []
        })
        return
      }
      this.$refs['templateForm'].validate(async(valid) => {
        if (valid) {
          const tNodeList = this.templateList[this.template.value]
          tNodeList.contents.forEach(tNode => {
            this.temp.schedulingNodes.push({
              serialNumber: tNode.serialNumber,
              content: tNode.content,
              safetyControl: tNode.safetyControl,
              division: tNode.division,
              checkDate: []
            })
          })
          // let tNode = this.templateList.find(item => item.serialNumber === this.template.value)
          this.showTemplate = false
        }
      })
    },
    // 删除添加工器具
    deleteEqu(index) {
      this.temp.equipments.splice(index, 1)
    },
    addEqu() {
      this.temp.equipments.push({
        code: 'custom',
        name: '自定义',
        number: '',
        specification: '',
        remark: ''
      })
    },
    // 获取所有用户
    async getAllUser() {
      const params = { pageNum: 1, pageSize: 9999 }
      userPage(params).then(res => {
        const { data } = res
        this.allUsers = data.list.map(item => {
          return { value: item.id, label: item.name }
        })
      })
    },
    // 下载模板
    downloadFile(index) {
      window.location.href = files[index]
    },
    // 工程概况提交表单校验
    submitFirst() {
      this.$refs['firstForm'].validate((valid) => {
        if (valid) {
          this.active = 1
        }
      })
    },
    // 施工信息提交表单校验
    submitSecond() {
      this.$refs['secondForm'].validate((valid) => {
        if (valid) {
          this.active = 2
        }
      })
    },
    // 工程管理提交表单校验
    submitThird() {
      this.$refs['thirdForm'].validate((valid) => {
        if (valid) {
          this.active = 3
        }
      })
    },
    submit() {
      const params = { ...this.temp }
      // params.startDate = params.checkDate[0]
      // params.endDate = params.checkDate[1]
      params.drawings = JSON.stringify(params.drawings.map(item => {
        return { name: item.name, url: item.response || item.url }
      }))
      params.protectiveEquipmentDoc = JSON.stringify(params.protectiveEquipmentDoc.map(item => {
        return { name: item.name, url: item.response || item.url }
      }))
      params.mechanicalIoDoc = JSON.stringify(params.mechanicalIoDoc.map(item => {
        return { name: item.name, url: item.response || item.url }
      }))
      params.safetyToolDoc = JSON.stringify(params.safetyToolDoc.map(item => {
        return { name: item.name, url: item.response || item.url }
      }))
      params.workUsers = JSON.stringify(params.workUsers)
      if (params.id) {
        params.createBy = this.uid
        params.createByName = this.name
      } else {
        params.updateBy = this.uid
      }

      if (params.schedulingNodes && params.schedulingNodes.length > 0) {
        const sNodes = []
        params.schedulingNodes.forEach(item => {
          const obj = {
            serialNumber: item.serialNumber,
            content: item.content,
            safetyControl: item.safetyControl,
            division: item.division,
            startTime: item.checkDate.length > 0 ? item.checkDate[0] : '',
            endTime: item.checkDate.length > 0 ? item.checkDate[1] : ''
          }
          if (item.id) obj.id = item.id
          sNodes.push(obj)
        })

        params.schedulingNodes = sNodes
      }
      this.openLoading()
      schemeSave(params).then(() => {
        this.closeLoading()
        this.$message({
          type: 'success',
          message: this.title + '成功'
        })
        this.$emit('closeEdit')
      }).catch(err => {
        this.closeLoading()
      })
    },
    // 图片上传
    handleUpload(option) {
      this.$ossUpload({
        path: option.file.name,
        file: option.file,
        folder: 'ticket',
        done: res => {
          const fileUrl = res.res.requestUrls[0].split('?')[0]
          option.onSuccess(fileUrl)
        },
        fail: err => {
          console.log(err)
        }
      })
    },
    handleRemove(file, fileList, type) {
      this.exportType = type
      if (this.exportType === 1) {
        this.temp.protectiveEquipmentDoc = this.temp.protectiveEquipmentDoc.filter(item => item.uid != file.uid)
      } else if (this.exportType === 2) {
        this.temp.mechanicalIoDoc = this.temp.mechanicalIoDoc.filter(item => item.uid != file.uid)
      } else if (this.exportType === 3) {
        this.temp.safetyToolDoc = this.temp.safetyToolDoc.filter(item => item.uid != file.uid)
      } else {
        this.temp.drawings = this.temp.drawings.filter(item => item.uid != file.uid)
      }
    },
    handleSuccess(res, file, fileList) {
      // fileList.forEach(item => {
      //   if(item.uid === file.uid) item.url = res
      // });
      if (this.exportType === 1) {
        this.temp.protectiveEquipmentDoc.push(file)
      } else if (this.exportType === 2) {
        this.temp.mechanicalIoDoc.push(file)
      } else if (this.exportType === 3) {
        this.temp.safetyToolDoc.push(file)
      } else {
        this.temp.drawings.push(file)
      }
    },
    handleExceed(files, fileList) {
      if (this.exportType) {
        this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
      } else {
        this.$message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
      }
    },
    beforeAvatarUpload(file) {
      if (this.exportType) {
        const fileType = file.name.substring(file.name.lastIndexOf('.') + 1)
        if (fileType === 'pdf' || fileType === 'docx') {
          // console.log('file');
        } else {
          this.$message.error('文件类型必须为docx或pdf格式')
          return false
        }
      } else {
        const isLt20M = file.size / 1024 / 1024 < 20
        if (!isLt20M) {
          this.$message.error('上传文件/图片大小不能超过 20MB!')
        }
        return isLt20M
      }
    },
    // beforeRemove(file, fileList) {
    //   return this.$confirm(`确定移除 ${ file.name }？`);
    // }
    openImg(url) {
      this.imgList = [url];
      this.showImgFlag = true;
    },
    openLoading() {
      this.elLoading = this.$loading({
        lock: true,
        text: '加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
    },
    closeLoading() {
      this.elLoading.close()
    }
  }
}
</script>
<style scoped="scoped" lang="scss">
.detail {
  padding: 0 20px 40px 20px;

  .form_box {
    > div:first-child {
      margin-top: 30px;
    }
  }
}

.input-suffix {
  display: flex;

  .s-title {
    width: 40px;
  }

  .s-cont {
    width: calc(100% - 40px);
  }
}

.footer {
  margin-top: 10px;
  text-align: right;
}

.danger {
  display: flex;
  justify-content: space-between;
}

.danger-content {
  white-space: pre-wrap;
  line-height: 20px;
  // margin-top: 10px;
}

img {
  cursor: pointer;
  width: 100px;
  height: 100px;
  margin-right: 20px;
  object-fit: cover;
}
</style>
